<template>
  <div class="wrap">
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        :collapse="isCollapse"
        router
        class="el-menu-vertical-demo"
        default-active="2"
        style="height: 100vh;"
        text-color="#fff"
      >
        <h1 class="logo f16">
          <img class="mr10" src="@/assets/imgs/logo.png" alt="">
          <span v-if="!isCollapse">十方智育</span>
        </h1>
        <el-menu-item index="/">
          <el-icon><Menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="1-1">用户管理</el-menu-item>
          <el-menu-item index="/system/dic">字典管理</el-menu-item>
          <el-menu-item index="/system/log">日志管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    <main>
      <header class="header bgfff">
        <div @click="isCollapse=!isCollapse">
          <el-icon  v-if="!isCollapse"><Fold /></el-icon>
          <el-icon v-else><Expand /></el-icon>
        </div>
        
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img class="avatar" src="/imgs/avatar.jpg" alt="">
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="center">个人中心</el-dropdown-item>
              <el-dropdown-item>布局设置</el-dropdown-item>
              <el-dropdown-item command="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </header>
      <div class="p10 bgfff m10 router">
        <RouterView/>
      </div>
    </main>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter();

const isCollapse = ref(false) 

const handleCommand=cmd=>{
  console.log('cmd',cmd);
  switch(cmd){
    case 'exit':
      router.replace('/login');
      break;
    case 'center':
      router.replace('/system/center');
      break;
  }
}

</script>
<style scoped>
.wrap{display: flex;}
.logo{color: #fff;display: flex;align-items: center;padding: 10px 0;justify-content: center;}
.logo img{height: 40px;}
main{flex-grow: 1;}
.header{padding: 15px;display: flex;justify-content: space-between;box-shadow: 0 1px 2px #999;}
.header .avatar{height: 36px;}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.router{border-radius: 10px;}
</style>
